<template>
    <div class="container">
      <div class="tips-title"><b>Part 1. DatePicker 日期选择器</b></div>
      <div class="tips-title">1.日期 选择 日 / 月 / 年 / 周 / 带快捷选项 / 多个日期</div>
      <el-row :gutter="5">
        <el-col :span="6">
          <el-date-picker v-model="value1_1" type="date" placeholder="选择日"></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="value1_2" type="month" placeholder="选择月"></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="value1_3" type="year" placeholder="选择年"></el-date-picker>
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="6">
          <el-date-picker v-model="value1_4" type="week" placeholder="选择周" format="yyyy 第 WW 周"></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="value1_5" align="right" type="date" placeholder="选择日 带快捷选项" :picker-options="pickerOptions1"></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="value1_6" type="dates" placeholder="选择一个或多个日期"></el-date-picker>
        </el-col>
      </el-row>
      <div class="tips-title">2.选择日期范围 默认 / 带快捷选项</div>
      <el-row :gutter="5">
        <el-col :span="8">
          <el-date-picker v-model="value1_7" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-date-picker v-model="value1_8" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2"></el-date-picker>
        </el-col>
      </el-row>
      <div class="tips-title">3.选择月份范围 默认 / 带快捷选项</div>
      <el-row :gutter="5">
        <el-col :span="8">
          <el-date-picker v-model="value1_9" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-date-picker v-model="value1_10" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions3"></el-date-picker>
        </el-col>
      </el-row>
      <div class="tips-title"><b>Part 2. TimePicker 时间选择器</b></div>
      <el-row :gutter="5">
        <div class="tips-title">1. 固定时间点 / 任意时间点 / 任意时间点(可滑动)</div>
        <el-col :span="6">
          <el-time-select v-model="value2_1" :picker-options="{start: '08:30',step: '00:15',end: '18:30'}" placeholder="选择时间"></el-time-select>
        </el-col>
        <el-col :span="6">
          <el-time-picker v-model="value2_2" :picker-options="{selectableRange: '06:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker>
        </el-col>
        <el-col :span="6">
          <el-time-picker arrow-control v-model="value2_3" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" placeholder="任意时间点"></el-time-picker>
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <div class="tips-title">2. 固定时间范围 / 任意时间范围</div>
        <el-col :span="12">
          <el-time-select placeholder="起始时间" v-model="startTime2" :picker-options="{start: '08:30', step: '00:15', end: '18:30'}"></el-time-select>
          <el-time-select placeholder="结束时间" v-model="endTime2" :picker-options="{start: '08:30', step: '00:15', end: '18:30', minTime: startTime2}"></el-time-select>
        </el-col>
        <el-col :span="12">
          <el-time-picker is-range v-model="value2_4" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
        </el-col>
      </el-row>
      <div class="tips-title"><b>Part 3. DateTimePicker 日期时间选择器</b></div>
      <el-row>
        <div class="tips-title">1.日期和时间点 默认 / 带快捷选项 / 设置默认时间</div>
        <el-col :span="8">
          <div class="tips-title-sub">type="datetime"</div>
          <el-date-picker v-model="value3_1" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-col>
        <el-col :span="8">
          <div class="tips-title-sub">增加 今天/昨天/一周前 时间选择</div>
          <el-date-picker v-model="value3_2" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1"></el-date-picker>
        </el-col>
        <el-col :span="8">
          <div class="tips-title-sub">default-time 12点</div>
          <el-date-picker v-model="value3_3" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>
        </el-col>
      </el-row>
      <el-row>
        <div class="tips-title">2.日期和时间范围 默认 / 带快捷选项</div>
        <el-col :span="12">
          <el-date-picker v-model="value3_4" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-date-picker v-model="value3_5" type="datetimerange" :picker-options="pickerOptions1" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
        </el-col>
      </el-row>
    </div>
</template>
<script>
  export default {
    name: 'f-datepicker',
    data() {
      return {
        pickerOptions3: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        pickerOptions2: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        pickerOptions1: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

        value1_1: '',
        value1_2: '',
        value1_3: '',
        value1_4: '',
        value1_5: '',
        value1_6: '',
        value1_7: '',
        value1_8: '',
        value1_9: '',
        value1_10: '',
        value2_1: '',
        value2_2: '',
        value2_3: '',
        startTime2: '',
        endTime2: '',
        value2_4: [new Date(2020, 5, 10, 8, 40), new Date(2016, 5, 10, 17, 40)],
        value3_1: '',
        value3_2: '',
        value3_3: '',
        value3_4: '',
        value3_5: ''
      }
    }
  }
</script>
<style>

</style>

